<template>
  <div class="model-viewer-page">
    <h1>3D模型查看器（优化显示大小）</h1>
    
    <div class="controls">
      <div class="control-group">
        <label>模型URL:</label>
        <input v-model="modelUrl" type="text" placeholder="输入模型URL" />
      </div>
      
      <div class="control-group">
        <label>模型类型:</label>
        <select v-model="modelType">
          <option value="gltf">GLTF</option>
          <option value="glb">GLB</option>
          <option value="obj">OBJ</option>
          <option value="fbx">FBX</option>
          <option value="stl">STL</option>
          <option value="3mf">3MF</option>
        </select>
      </div>
      
      <!-- <div class="control-group">
        <label>模型大小:</label>
        <input 
          v-model="targetSize" 
          type="range" 
          min="0.5" 
          max="10" 
          step="0.1"
          @input="updateModelSize"
        >
        <span>{{ targetSize }}</span>
      </div>
       -->
      <!-- <div class="control-group">
        <label>模型颜色:</label>
        <input v-model="modelColor" type="color" />
      </div> -->
      
      <button @click="loadModel">加载模型</button>
    </div>
    
    <ProperScaleModelViewer
      v-if="showViewer"
      :model-url="modelUrl"
      :model-type="modelType"
      :background-color="backgroundColor"
      :show-axes="showAxes"
      :model-color="modelColor"
      :target-size="targetSize"
      @loading="handleLoading"
      @loaded="handleLoaded"
      @error="handleError"
      @progress="handleProgress"
      style="width: 1000px;height: 600px;"
    />
    
    <div class="examples">
      <h3>示例模型:</h3>
      <div class="example-list">
        <div 
          v-for="example in exampleModels" 
          :key="example.url"
          class="example-item"
          @click="loadExample(example)"
        >
          {{ example.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ProperScaleModelViewer from './main.vue';

const modelUrl = ref('https://dev-flsuncloud.oss-cn-hangzhou.aliyuncs.com/model/8f87766abb303b47545497b164c54340.3mf');
const modelType = ref('3mf');
const backgroundColor = ref('#f0f0f0');
const showAxes = ref(true);
const showViewer = ref(true);
const modelColor = ref('#aaaaaa');
const targetSize = ref(3.0); // 默认大小

const exampleModels = ref([
  {
    name: 'Damaged Helmet (GLB)',
    type: 'glb',
    url: 'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.glb'
  },
  {
    name: 'Lucy (OBJ)',
    type: 'obj',
    url: 'https://threejs.org/examples/models/obj/lucy/Lucy100k.obj'
  },
  {
    name: '卡车 (3MF)',
    type: '3mf',
    url: 'https://threejs.org/examples/models/3mf/truck.3mf'
  },
  {
    name: 'Parrot (FBX)',
    type: 'fbx',
    url: 'https://threejs.org/examples/models/fbx/Parrot.fbx'
  },
  {
    name: 'Utah Teapot (STL)',
    type: 'stl',
    url: 'https://threejs.org/examples/models/stl/teapot-binary.stl'
  }
]);

function loadModel() {
  if (!modelUrl.value) return;
  showViewer.value = true;
}

function loadExample(example) {
  modelUrl.value = example.url;
  modelType.value = example.type;
  showViewer.value = true;
}

function updateModelSize() {
  // 当滑块值变化时自动更新模型大小
  showViewer.value = true;
}

function handleLoading(isLoading) {
  console.log('Loading:', isLoading);
}

function handleLoaded() {
  console.log('模型加载完成');
}

function handleError(error) {
  console.error('加载错误:', error);
}

function handleProgress(progress) {
  // console.log('加载进度:', progress);
}
</script>

<style scoped>
.model-viewer-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.controls {
  margin: 20px 0;
  padding: 25px;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.control-group {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.control-group label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
}

input[type="text"] {
  padding: 10px;
  width: 500px;
  max-width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input[type="color"] {
  width: 60px;
  height: 40px;
  padding: 2px;
  border: 1px solid #ddd;
}

input[type="range"] {
  width: 200px;
  margin: 0 10px;
}

select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}

button {
  padding: 12px 24px;
  background: #09f;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

button:hover {
  background: #07d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.examples {
  margin-top: 30px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
}

.example-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}

.example-item {
  padding: 12px 20px;
  background: #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.example-item:hover {
  background: #d0d0d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>